نمای کلی پروژه 


کدنویسی لندینگ پیج Wood Mart‏ 


N 
m 


راینجا بخش های مختلف پروژه را مشاهده خواهید کرد. 


برای راحتی انجام کار ان را نجزیه کردیم. 


Reddington.6-Piece Set Furniture 
Sectional Living Room Sofa. 


TOP CATEGORIES 


49 A Bà 


LIGHTING CLOCKS FURNITURE ACCESSORIES COOKING TOYS 


SALE PRODUCTS SPECIAL OFFER w rumet 
E 


(۵) سفارش مخصوص 


MOST POPULAR 


m Popular بخش‎ ($) 


IE 


— 


1 Home Delivery. 


FOR TRAVELERS =» 


FOR TRAVELERS ar " SALE PRODUCTS 


Travelers بخش‎ (A) 


FAVORITE GARDEN 


Garden بخش‎ (3) 


ALL FOR THE GARDEN ۳ 


All Garden بخش‎ (lo) 


New Arrival of Discount 30% 
em Garden Gloves. Garden Equipment 


FURNITURE CATEGORIES 


ae Aa 


JEWELRY MARKETPLACE SHOES ELECTRONICS 


magisso 


25 Ideas For 
Modem Intenor 
After inn c 


vera nome 


Beds And Sofas 
With 1596 Discount. 


Reinterprets the classic Green interior design inspiration Minimalist design furniture 2016 
bookshelf $ S 


Reinterprets the classic Green interior design inspiration Minimalist design furniture 2016 
bookshelf 


CONTINUE LA DUNG 


14/7 Support Fast Debvery 


PR لسو‎ 9 


ENGLISH usD FREE SHIPPING FOR ALL ORDERS OF $150 


@woodmart. 


polos ۸ ۷ 

برای طراحی این بخش از کلاس های بوتسترب استفاده شد تا gio‏ های ابشاری درست 
شوند. چندین منوی ابشاری در این طراح وجود دارد. ایکون ها font awesome‏ 
هستند. رنگ زرد یکسان در بخش های مختلف این پروژه استفاده شده. 


میتوانید کدهای این بخش را در مسیر زیر در پروژه ۷۷000-۲۳۲ پیدا کنید: 
wood-mart > src > components > Woodmart > Header‏ 


22 BROWSE CATEGORIES ¥ HOME SHOP BLOG PAGES BUY SPECIAL OFFER PURCHASE THEME 


٩‏ نوامبر 
این بخش b‏ صحبت با برایان برای نیمه کار ماندن به توافق رسیده شد. تا بخش های 
بعدی سریعتر تکمیل شود. بخش مگامنو بخاطر داشتن منوی ابشاری Me‏ بخشی فقط 

یک بخش ان برای ابشار های ساده تکمیل و بقیه بخش های ابشار رها شده ماند. 


wood-mart < src » components < Woodmart » Megamenu 


Reddington.6-Piece Set Furniture 
Sectional Living Room Sofa. 


VIEW MORE TO SHOP 


TOP CATEGORIES 


A G te A 


LIGHTING CLOCKS FURNITURE ACCESSORIES COOKING 


19 Products 22 Products 60 Products 13 Products 12 Products 


polos \o 
بود. زیرا تنها بخش کار کردن ان روی انیمیشن موس هاور بود که‎ elo این بخش هم‎ 
بزرگتر شود.‎ scale به ان داده میشد تا‎ transform sb 


wood-mart > SIC > components > Woodmart > TopCat 


(۵) سفارش مخصوص 


SALE PRODUCTS SPECIAL OFFER NEw FEATURED TOP SELLERS 


$112.00 


۰ و ۱۱ نوامبر 
این بخش بزرگ بود. در حقیقت دو بخش بود. یکی تصوير بزرگ که اسلایدر بود و یکی 
تصویر ۶ تایی که ان هم اسلایدر بود. علاوه بر این تنظیمات کتگوری هم داشت. دو روز 
کامل زمان برد و خارج از ساعات کاری هم کار شد تا زودتر plod‏ شود. 


میتوانید کدهای این بخش را در مسیر زیر در پروژه ۷۷000-۲۳۳۵۲ پیدا کنید: 
wood-mart > src > components > Woodmart ۰: ۲‏ 


Popular بخش‎ )۶( 


MOST POPULAR 


Cum cubilia ac fringilla lorem 
quis himenaeos velit. 


۱١‏ نوامبر 

این بخش بخاطر انیمیشن های نقطه ای و اسلایدر JUS‏ زمان برد. برای کشف 
چگونگی اجرای انیمیشن ساعت های زیادی صرف شد اما سرانجام فرمول ان پیدا شد. 
تنها b‏ استفاده از keyframes‏ ها در CSS‏ میتوان این انیمیشن نقطه ای را بوجود اورد. 


مبتوانید کدهای این بخش را در مسیر زیر در پروژه Wood-mart‏ پیدا کنید: 
wood-mart > src > components > Woodmart > Popular‏ 


sac بخش چهار‎ (V) 


1 Home Delivery. 2 Order As a Gift. 3 High Quality. 4 Buy With Joy. 


The European languages. Donec odio etiam sceles. Curabitur hac hac maece. Ullamcorper magna nec. 


۲ توامبر 
این هم یکی از ساده ترین بخش ها بود و به راحتی طراحی شد. 


wood-mart > src > components > Woodmart > FourNumbers 


Travelers بخش‎ (A) 


FOR TRAVELERS NEW FEATURED TOP SELLERS < SALE PRODUCTS 


Solo Cook Set 
$118.00 


00 


۲ نوامبر 
این بخش تا حدود Ao‏ درصد از کمپوننت های reusable‏ استفاده شد. اما برای اینکه 


صفحه ارایی راست به چپ اعمال شود (خودش چپ به راست olas (yas (dq)‏ در 
کمپوننت اصلی بوجود امد. 


میتوانید کدهای این بخش را در مسیر زیر در پروژه WOOd-Mart‏ پیدا کنید: 
wood-mart > src > components > Woodmart ۰: ۲‏ 


Garden بخش‎ (3) 


FAVORITE GARDEN 


Many desktop publishing and 


web page editors now. 


Garden Shovel 
$12200 


۳ نوامبر 

این کمپوننت هم تا Ao‏ درصد resuable component‏ بود و تغییراتی در کمپوننت 
اصلی بوجود امد تا صفحه ارایی از راست به چپ شود. همچنین داده های نسخه دمو 
در این طرح امده است. 


میتوانید کدهای این بخش را در مسیر زیر در پروژه wood-mart‏ بیدا کنید: 
wood-mart > src > components > Woodmart > Garden‏ 


All Garden بخش‎ (10) 


IF‏ 9 ۱۵ نوامبر 


Penatibus Nibh 


pe o0 


ALL ALL FOR THE GARDEN THE GARDEN NEW FEATURED TOP SELLERS 


ET^ÍT 


— Pied Garden Scissors 


$223.00 $0200 


نکته مهم در طراحی این بخش استفاده از جی 595 6( بجای ترفند SetState (clo‏ در 
ری اکت است. بخاطر حفظ انیمیشن هایی که وجود دارد WL‏ اینگونه عمل کرد. برای 
فهمیدن همین نکته تمام راه هایی که در ری اکت قابل Hol‏ بود تست شد و یک روز 
Jo‏ زمان برد. صبح روز بعد با تست کردن روش جی کوتری به نتیجه رسید. 


مبتوانید کدهای این بخش را در مسیر زیر در پروژه Wood-mart‏ پیدا کنید: 
wood-mart > src > components > Woodmart ۰: 0‏ 


۳۸ خط 
FA‏ خط 
۷ خط 
۹ خط 
٩‏ خط 


index.js 
index.css 
Special.js 
data.js 
createEl.js 


کمپوننت مادر 
استایل ها 

فایل اصلی اسلایدر 
داده های جیسون 
یک تابع کمک کننده 


